<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01.Basic Usage.html</title>
</head>
<body>
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/styles/default.min.css">
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/languages/go.min.js"></script>

<pre>
    <code>
let a = 123;
console.log(a);
function abc(){}
class bb{
  constructor(){}
  do(){}
}
for(let i=0;i<3;++i){
  console.log(i)
}
console.log(a)
const a = require('hightlight.js')
    </code>
</pre>
<!--
1. This will find and highlight code inside of <pre><code> tags; it tries to detect the language automatically. If automatic detection doesn’t work for you, or you simply prefer to be explicit, you can specify the language manually in the using the class attribute:

这将查找并突出显示 <pre><code> 标签内的代码；

它会尝试自动检测语言。
并生成全新的<code>：
<code class="language-js hljs language-javascript">
  <span class="hljs-keyword">let</span> a = <span class="hljs-number">123</span>;
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a);
  <span class="hljs-keyword">function</span> <span class="hljs-title function_">abc</span>(<span class="hljs-params"></span>){}
  <span class="hljs-keyword">class</span> <span class="hljs-title class_">bb</span>{
    <span class="hljs-title function_">constructor</span>(<span class="hljs-params"></span>){}
    <span class="hljs-title function_">do</span>(<span class="hljs-params"></span>){}
  }
  <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;<span class="hljs-number">3</span>;++i){
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(i)
  }
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a)
  <span class="hljs-keyword">const</span> a = <span class="hljs-built_in">require</span>(<span class="hljs-string">'hightlight.js'</span>)
</code>

如果自动检测对您不起作用，或者您只是更喜欢显式，您可以使用 class 属性手动指定语言：
-->
<pre>
<!--
  <code>class的类名参看 lib/languages/*.js
  比如 lib/languages/javascript.js
  其中：
    return {
    name: 'Javascript',
    aliases: ['js', 'jsx', 'mjs', 'cjs'],
    ...

  说明类名可以为 Javascript、js、jsx、mjs、cjs
-->
    <code class="language-js">
let a = 123;
console.log(a);
function abc(){}
class bb{
  constructor(){}
  do(){}
}
for(let i=0;i<3;++i){
  console.log(i)
}
console.log(a)
const a = require('hightlight.js')
    </code>
</pre>


<!--
2. Plaintext Code Blocks
代码block没有额外的颜色 清一色黑色
只有一个灰色的背景色

<code class="language-plaintext hljs">
  let a = 123;
  console.log(a);
  function abc(){}
  class bb{
    constructor(){}
    do(){}
  }
  for(let i=0;i&lt;3;++i){
    console.log(i)
  }
  console.log(a)
  const a = require('hightlight.js')
</code>
-->
<pre>
    <code class="language-plaintext">
let a = 123;
console.log(a);
function abc(){}
class bb{
  constructor(){}
  do(){}
}
for(let i=0;i<3;++i){
  console.log(i)
}
console.log(a)
const a = require('hightlight.js')
    </code>
</pre>


<!--
3. Ignoring a Code Block

连灰色的背景色都没了

<code class="nohighlight">
let a = 123;
console.log(a);
function abc(){}
class bb{
  constructor(){}
  do(){}
}
for(let i=0;i&lt;3;++i){
  console.log(i)
}
console.log(a)
const a = require('hightlight.js')
</code>
-->
<pre>
    <code class="nohighlight">
let a = 123;
console.log(a);
function abc(){}
class bb{
  constructor(){}
  do(){}
}
for(let i=0;i<3;++i){
  console.log(i)
}
console.log(a)
const a = require('hightlight.js')
    </code>
</pre>


<script>hljs.highlightAll();</script>


<!--
4.  here’s the rough equivalent of calling highlightAll but doing the work manually instead:
-->
<!--<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('pre code').forEach((el) => {
      hljs.highlightElement(el);
    });
  });
</script>-->
</body>
</html>
